<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>角色管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输角色名称" clearable v-model="name" @clear="searchRole">
                        <el-button slot="append" icon="el-icon-search" @click="searchRole"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="addDialogVisible=true">添加角色</el-button>
                </el-col>
            </el-row>
            <el-table :data="roleList" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="角色名称" prop="name"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="showEditDialog(scope.row)">修改</el-button>
                        <el-button type="danger" size="mini" @click="removeRoleById(scope.row.id)">删除</el-button>
                        <el-button type="warning" size="mini" @click="grantePermission(scope.row)">授权</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[3, 6 , 12, 24]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </el-card>
        <!--添加角色-->
        <el-dialog title="添加角色" :visible.sync="addDialogVisible" width="50%" @close="addRoleFormClose">
            <el-form
                    :model="addRoleForm"
                    :rules="addRoleFormRules"
                    ref="addRoleFormRef"
                    label-width="100px"
                    class="demo-ruleForm"
            >
                <el-form-item label="角色名称" prop="name">
                    <el-input v-model="addRoleForm.name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addRole">确 定</el-button>
                <el-button @click="addDialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
        <!--修改角色-->
        <el-dialog
                title="修改角色"
                :visible.sync="editDialogVisible"
                width="50%"
                @close="editRoleFormClose"
        >
            <el-form
                    :model="editRoleForm"
                    :rules="editRoleFormRules"
                    ref="editRoleFormRef"
                    label-width="100px"
                    class="demo-ruleForm"
            >
                <el-form-item label="角色名称" prop="name">
                    <el-input v-model="editRoleForm.name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editRole">确 定</el-button>
                <el-button @click="editDialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>

        <!--角色授权对话框-->
        <el-dialog title="角色授权" :visible.sync="addRolePerDialogVisible" width="50%">
            <el-form
                :model="rolePer"
                ref="rolePerFormRef"
                label-width="100px"
                class="demo-ruleForm"
            >
                <el-form-item label="角色名称">
                    <el-input v-model="rolePer.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="权限">
                  <el-tree
                      :data="permissionData"
                      :props="defaultProps"
                      :default-expand-all=true
                      ref="tree"
                      node-key="id"
                      :check-strictly=true
                      :show-checkbox=true
                      :default-checked-keys="checkedPersIds"></el-tree>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addRolePer">确 定</el-button>
                <el-button @click="addRolePerDialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
              addDialogVisible: false,
              editDialogVisible: false,
              pageNum: 1,
              pageSize: 3,
              name: "",
              roleList: [],
              total: 0,
              addRoleForm: {
                  name: ""
              },
              addRoleFormRules:{
                name:[
                  {required:true,message:'角色名称不能为空.',trigger:'blur'}
                ]
              },
              editRoleForm: {
                  id: -1,
                  name: ""
              },
              editRoleFormRules:{
                name:[
                  {required:true,message:'角色名称不能为空.',trigger:'blur'}
                ]
              },
              rolePer:{
                  id:-1,
                  name:'',
                  insertTime: '',
                  checkedKeys:[]
              },
              addRolePerDialogVisible:false,
              permissionData:[],
              defaultProps: {
                children: 'children',
                label: 'name'
              },
              checkedPersIds:[35,36]  // 已被授权的权限id
            };
        },
        methods: {
          //保存 授权
            addRolePer(){
                let keys = this.$refs.tree.getCheckedKeys();
                if(keys.length > 0 ){
                  this.rolePer.checkedKeys = keys ;
                  let url = "/role/addPerToRole"
                  this.$axios.post(url,this.rolePer)
                      .then((res)=>{
                        if (res.data.code == 200) {
                          this.rolePer = {};
                          //打开对话框
                          this.addRolePerDialogVisible = false ;
                        }else {
                          this.$message({
                            type: 'error',
                            message: data.data.msg,
                            duration: 1000
                          });
                        }
                      })
                }else {
                  alert("请选择权限!");
                  return ;
                }
            },
          //打开授权对话框
            grantePermission(obj){
                this.rolePer = obj;
                //打开对话框
                this.addRolePerDialogVisible = true ;
                //查询  当前角色的 已授的权限的id  赋值给 checkedPersIds

            },
            // 删除角色信息
            removeRoleById(id) {
              this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.$axios.delete("/role/del/" + id)
                    .then((data) => {
                      if (data.data.code == 200) {
                        this.$message({
                          type: 'success',
                          message: '删除成功!',
                          duration: 1000
                        });
                        this.initRoleData();
                      } else {
                        this.$message({
                          type: 'error',
                          message: data.data.msg,
                          duration: 1000
                        });
                      }
                    });
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                });
              });
            },
            //添加角色
            showAddDialog(row) {
                this.addDialogVisible = true;
            },
            //编辑角色
            showEditDialog(row) {
                this.editDialogVisible = true;
                this.editRoleForm = row;
            },
            editRoleFormClose() {
                this.$refs.editRoleFormRef.resetFields();
            },
            //关闭添加对话框
            addRoleFormClose(){
              this.$refs.addRoleFormRef.resetFields();
              this.addDialogVisible = false ;
            },

            //修改角色
            editRole() {
              this.$refs.editRoleFormRef.validate((v)=>{
                if (!v) return ;
                let url = "/role/modify";
                this.$axios.put(url,this.editRoleForm)
                    .then((res)=>{
                      if (res.data.code == 200) {
                        this.$message({
                          message: res.data.msg,
                          type: 'success',
                          duration:1000
                        });
                        this.$refs.editRoleFormRef.resetFields();
                        this.editDialogVisible = false ;
                      }else {
                        this.$message({
                          message: res.data.msg,
                          type: 'error',
                          duration:1000
                        });
                      }
                    })
              });
            },
          //保存 角色
            addRole() {
              this.$refs.addRoleFormRef.validate((v)=>{
                if (!v) return ;
                let url = "/role/add";
                this.$axios.post(url,this.addRoleForm)
                    .then((res)=>{
                      if (res.data.code == 200) {
                        this.$message({
                          message: res.data.msg,
                          type: 'success',
                          duration:1000
                        });
                        this.$refs.addRoleFormRef.resetFields();
                        this.addDialogVisible = false ;
                        this.initRoleData();
                      }else {
                        this.$message({
                          message: res.data.msg,
                          type: 'error',
                          duration:1000
                        });
                      }
                    })
              });
            },

            initRoleData() {
              let url = "/role/list" ;
              this.$axios.get(url,{
                params:{
                  name :this.name ,
                  now:this.pageNum,
                  size:this.pageSize
                }
              }).then((res)=>{
                if (res.data.code == 200) {
                  this.roleList = res.data.data.list;
                  this.pageNum = res.data.data.pageNum;
                  this.pageSize = res.data.data.pageSize ;
                  this.total = res.data.data.total;
                }else {
                  this.$message({
                    message: res.data.msg,
                    type: 'error',
                    duration:1000
                  });
                }
              })
            },
            searchRole() {
                this.pageNum = 1;
                this.initRoleData();
            },
            handleSizeChange(newSize) {
                this.pageSize = newSize;
                this.pageNum = 1;
                this.initRoleData();
            },
            handleCurrentChange(newPage) {
                this.pageNum = newPage;
                this.initRoleData();
            },
            loadMenus() {
              let url = "/permission/loadAllMenus";
              this.$axios.get(url).then((res)=>{
                if (res.data.code == 200){
                  this.permissionData = res.data.data ;
                }else {
                  this.$message({
                    message: res.data.msg,
                    type: 'error',
                    duration:1000
                  });
                }
              })
            }
        },
        created() {
            this.initRoleData();
            this.loadMenus();
        }
    };
</script>
<style lang="less" scoped>
</style>